@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"
@import "app/styles/play/variables"

#screen-reader-surface-view
  visibility: hidden
  position: absolute
  z-index: 4
  top: 0
  left: 0
  /* Width/height will be scaled to grid size within viewport dynamically */
  width: 924px
  height: 589px
  pointer-events: all
  white-space: pre
  font-family: Courier, monospace
  color: transparent
  /* color: white */ /* for debugging */
  transform-origin: 0 0 0
  font-size: 30px
  line-height: 30px
  position: reolative

  .screen-reader-surface-application
    width: 100%
    height: 100%

  .map-grid
    width: 100%
    height: 100%
    display: grid

    .map-row
      height: 100%
      display: flex

      .map-cell
        width: 100%
        height: 100%
        border: 1px dotted rgba(200, 200, 200, 0.5)
        display: flex
        align-items: center
        justify-content: center

        &.cursor
          background-color: rgba(0, 0, 255, 0.5)

        .sr-only
          top: 50%
          left: 50%

  .map-screen-reader-live-updates
    position: absolute
    right: 5px
    bottom: 15px
    font-size: 20px
    line-height: 20px
    text-align: right
    color: white

body.screen-reader-mode
  #level-view
    #screen-reader-surface-view
      visibility: visible
